<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script src="../dist/claygl.js"></script>
    </head>
    <body style="margin:0px;">
        <canvas id="main"></canvas>
        <script type="text/javascript">
            var renderer = new clay.Renderer({
                canvas: document.getElementById('main'),
                devicePixelRatio: 1.0
            });
            renderer.resize(window.innerWidth, window.innerHeight);
            var camera = new clay.camera.Perspective({
                aspect: renderer.getViewportAspect()
            });
            camera.position.set(0, 0, 5);

            var scene = new clay.Scene();
            var sphereGeo = new clay.geometry.Sphere({
                widthSegments: 50,
                heightSegments: 50
            });

            var GLTFLoader = new clay.loader.GLTF();
            GLTFLoader.load('assets/models/suzanne/suzanne.gltf');
            var suzanneGeometry;
            GLTFLoader.on('success', function (res) {
                suzanneGeometry = res.scene.getNode('Suzanne').geometry;

                var envMap = clay.util.texture.loadTexture(
                    'assets/textures/hdr/pisa.hdr',
                    {
                        exposure: 2
                    },
                    function () {
                        envMap.flipY = false;

                        var coeff = clay.util.sh.projectEnvironmentMap(renderer, envMap);
                        var light = new clay.light.AmbientSH({
                            coefficients: coeff
                        });
                        console.log(coeff);
                        scene.add(light);

                        var material = new clay.Material({
                            shader: clay.shader.library.get('clay.standard')
                        });
                        var sphere = new clay.Mesh({
                            material: material,
                            geometry: sphereGeo
                        });

                        var monkey = new clay.Mesh({
                            geometry: suzanneGeometry,
                            material: material
                        });
                        sphere.position.x = -2;
                        monkey.position.x = 2;

                        scene.add(sphere);
                        scene.add(monkey);

                        var skydome = new clay.plugin.Skydome({
                            scene: scene,
                            environmentMap: envMap
                        });
                    }
                );
            });

            var control = new clay.plugin.OrbitControl({
                target: camera,
                domElement: renderer.canvas
            });

            var timeline =  new clay.Timeline();
            timeline.start();
            timeline.on('frame', function(deltaTime) {
                control.update(deltaTime);
                renderer.render(scene, camera);
            });
        </script>
</html>